import {useContext} from 'react';
import {Button, ScrollView, Text, TouchableOpacity, View} from 'react-native';
import {Context} from '../index';
import {SvgXml} from 'react-native-svg';
import xhs from 'assets/Images/xhs.svg';
import factory from 'assets/Images/factory.svg';
import useDimensions from 'hooks/useDimensions';
import {type ContextType} from '../index';
export default ({navigation}: RootStackScreenProps) => {
  const hp = useDimensions();
  const {
    inactive,
    StartNav,
    List,
    xfsList = [],
  } = useContext(Context) as ContextType;
  return (
    <>
      <View style={{flex: 1}}>
        <View
          style={{
            paddingLeft: 60 * hp,
            paddingTop: 24 * hp,
            paddingRight: 24 * hp,
          }}>
          <View style={{flex: 0}}>
            <Text
              style={{
                fontSize: 26 * hp,
                fontWeight: '500',
                color: 'rgba(0,0,0,0.9)',
                lineHeight: 30 * hp,
              }}>
              {List?.[inactive ?? 0].incidentType}
            </Text>
            <Text>{List?.[inactive ?? 0].address}</Text>
          </View>
        </View>
        <ScrollView
          style={{flex: 1}}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{
            marginTop: 10 * hp,
            paddingBottom: 20 * hp,
          }}>
          <View
            style={{
              borderRadius: 12,
              backgroundColor: '#fff',
              marginHorizontal: 16 * hp,
              padding: 16 * hp,
              marginBottom: 12 * hp,
            }}>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
              }}>
              <Text
                style={{
                  marginBottom: 20 * hp,
                  color: 'rgba(0,0,0,0.9)',
                  fontSize: 18 * hp,
                }}>
                警情信息
              </Text>
              <Button
                title="导航"
                onPress={() => {
                  StartNav({
                    target: List?.[inactive ?? 0]?.LatLng as GlobalMap.location,
                  });
                }}></Button>
            </View>

            <Text>
              救援地址：
              <Text style={{color: ': rgba(0,0,0,0.8)'}}>
                {List?.[inactive ?? 0].address}
              </Text>
            </Text>
            <Text>
              报警时间：
              <Text style={{color: ': rgba(0,0,0,0.8)'}}>
                {List?.[inactive ?? 0].incidentTime}
              </Text>
            </Text>
            <Text>
              详细描述：
              <Text style={{color: ': rgba(0,0,0,0.8)'}}>
                {List?.[inactive ?? 0].incidentDes}
              </Text>
            </Text>
          </View>
          <View
            style={{
              borderRadius: 12,
              backgroundColor: '#fff',
              marginHorizontal: 16 * hp,
              padding: 16 * hp,
              marginBottom: 16 * hp,
            }}>
            <Text
              style={{
                marginBottom: 20 * hp,
                color: 'rgba(0,0,0,0.9)',
                fontSize: 18 * hp,
              }}>
              周边单位
            </Text>
            <View
              style={{
                justifyContent: 'space-between',
                flexDirection: 'row',
                alignItems: 'flex-start',
              }}>
              <View>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <SvgXml
                    width={20 * hp}
                    height={20 * hp}
                    xml={factory}></SvgXml>

                  <Text
                    style={{
                      fontSize: 20 * hp,
                      fontWeight: '500',
                      color: 'rgba(0,0,0,0.8)',
                      marginLeft: 4 * hp,
                    }}>
                    衢州市诺尔化工有限公司
                  </Text>
                </View>
                <Text
                  style={{
                    flexDirection: 'row',
                    width: 272 * hp,
                    marginLeft: 24 * hp,
                    marginTop: 8 * hp,
                  }}
                  ellipsizeMode={'clip'}
                  numberOfLines={2}>
                  {[
                    '氢氧化钠',
                    '硫酸',
                    '乙酸乙酯',
                    '过新庚酸-1',
                    '1-二甲基',
                  ].map((item, index) => {
                    return (
                      <View
                        key={index}
                        style={{
                          flexDirection: 'row',
                          alignItems: 'center',
                        }}>
                        <Text style={{marginRight: 6 * hp}}>{item}</Text>
                        {index !== 5 && (
                          <View
                            style={{
                              width: 1,
                              height: 11 * hp,
                              marginRight: 6 * hp,
                              backgroundColor: 'rgba(0,0,0,0.3)',
                            }}></View>
                        )}
                      </View>
                      // <Text
                      //   style={{
                      //     marginLeft: 22 * hp,
                      //     borderRightWidth: 1,

                      //     borderRightColor: 'rgba(0, 0, 0, 0.08)',
                      //   }}>
                      //   {item}
                      // </Text>
                    );
                  })}
                </Text>
              </View>
              <TouchableOpacity
                onPress={() => {
                  navigation.navigate('factory', {});
                }}>
                <View
                  style={{
                    borderRadius: 8,
                    backgroundColor: '#0A59F7',
                    paddingHorizontal: 15 * hp,
                    paddingVertical: 11 * hp,
                    marginLeft: 10 * hp,
                  }}>
                  <Text
                    style={{
                      color: '#fff',
                    }}>
                    查看预案
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>
          <View
            style={{
              borderRadius: 12,
              backgroundColor: '#fff',
              marginHorizontal: 16 * hp,
              padding: 16 * hp,
            }}>
            <Text
              style={{
                marginBottom: 20 * hp,
                color: 'rgba(0,0,0,0.9)',
                fontSize: 18 * hp,
              }}>
              消防水源
            </Text>
            <Text
              style={{
                fontSize: 16 * hp,
                color: 'rgba(0,0,0,0.5)',
              }}>
              1KM内：{xfsList.length + '个'}
            </Text>
            <View>
              {xfsList.slice(0, 3).map((item, index: number) => {
                return (
                  <View
                    key={index}
                    style={{
                      marginTop: 15 * hp,
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                    }}>
                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                      }}>
                      <SvgXml
                        xml={xhs}
                        width={20 * hp}
                        height={20 * hp}></SvgXml>
                      <Text style={{marginHorizontal: 10 * hp}}>
                        {item.address}
                      </Text>
                    </View>
                    <Button
                      title="导航"
                      onPress={() => {
                        StartNav({
                          target: item.location,
                        });
                      }}></Button>
                  </View>
                );
              })}
            </View>
          </View>
        </ScrollView>
      </View>
    </>
  );
};
